<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>二维码解析API接口</title>
    <meta name="keywords" content="支持常规二维码图片解析的API">
    <meta name="description" content="支持常规二维码图片解析的API">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<style>
    body {
        background: #f8f9fa;
    }

    .container {
        max-width: 600px;
        margin: auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    #qrResult {
        background: #e9ecef;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
    }
</style>

    <body>
<div class="container mt-5">
    <h1 class="text-center">二维码解析API接口</h1>
    <h2 class="text-center">支持常规二维码图片解析的API</h2>
    <div class="form-group">
        <label for="qrUrl">二维码图片URL：</label>
        <input type="text" id="qrUrl" class="form-control" placeholder="输入二维码图片URL">
    </div>
    <button id="parseQr" class="btn btn-primary btn-block">解析二维码</button>
    <div id="qrResult" class="mt-4">
        <!-- 解析结果将展示在这里 -->
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js">
    $(document).ready(function() {
        $('#parseQr').click(function() {
            const qrUrl = $('#qrUrl').val().trim();
            if (qrUrl === '') {
                alert('请输入二维码图片URL');
                return;
            }

            const url = `https://api.vvhan.com/api/qrPsg?url=${qrUrl}`;

            $.getJSON(url, function(data) {
                if (data.success) {
                    const result = `
                    <h3>二维码解析结果</h3>
                    <p>二维码URL: ${data.data.url}</p>
                    <p>解析内容: ${data.data.content}</p>
                `;
                    $('#qrResult').html(result);
                } else {
                    $('#qrResult').html('<p>无法解析二维码，请检查URL是否正确。</p>');
                }
            }).fail(function() {
                $('#qrResult').html('<p>请求失败，请检查网络连接或稍后再试。</p>');
            });
        });
    });

</script>
</body>
</html>
